<template>
<div>
  <Modal
      v-model="showModal"
      title="完善商品信息"
      width="996px"
      footer-hide
      :mask-closable="false"
  >
    <!-- <Button type="primary" @click="addGood">选择商品</Button> -->

    <Form :model="item" :label-width="80" v-if="JSON.stringify(this.item) !== '{}'">
      
      <FormItem label="商品图片：">
        <div class="iai-add-image__picture-main">
          <div class="ice-any-picker">
            <div class="ice-any-picker__trigger" v-for="(img, i) in pickerImgs" :key="i">
              <div class="ice-any-picker__trigger-btn"
                :class="[{ 'ice-any-picker__trigger-btn-checked': img.checked }]"
                :data-i="i"
                :data-src="img.url"
                :data-key="img.key"
                @click="onPickerTriggerChecked"
              >
                <Icon type="md-checkmark" />
              </div>
              <div class="iai-add-image__resource-pic">
                <div class="iai-add-image__resource-pic__cover">
                  <img :src="img.url" draggable="false" style="width:100%;" />
                </div>
                <Button type="dashed" :class="{'main-cover':img.url === item.pic_url}" long @click="onSetMainCover(img.url)">设为封面图</Button>
              </div>
            </div>
          </div>
          <Button type="text" @click="onAddItemImages">自主选择图片到商品图列表</Button>
        </div>
      </FormItem>
      <FormItem label="商品图片：">
        <div class="iai-add-image__selectbar" v-if="pickerSelectesImgs.length">
          <div class="iai-add-image__list">
            <div
              class="iai-add-image__selectbar-item"
              v-for="(img, i) in pickerSelectesImgs"
              :key="img.key"
            >
              <div class="iai-add-image__selectbar-item-cover">
                <img :src="img.url" draggable="false" />
              </div>
              <div
                class="iai-add-image__delete"
                :data-i="i"
                :data-key="img.key"
                @click="onRmSelectItem"
              >
                <Icon type="ios-close" />
              </div>
            </div>
          </div>
          <span style="display:block;margin-top:20px;">请选择三张图片作为展示图</span>
        </div>
      </FormItem>
      <FormItem label="封面图片：" style="margin-top:20px;">
        <img :src="item.pic_url" style="width:100px;">
        <p style="margin-top:20px;">请选择或上传1张白底商品图，尺寸不小于 500x500px</p>
      </FormItem>
    </Form>
    <div class="ice-add-image-dialog-new__footer">
      <div class="ice-add-image-dialog-new__footer__limit"></div>
      <div class="ice-add-image-dialog-new__footer__operation">
        <Button type="primary" @click="onExportItem">确定</Button>
        <Button @click="onHide">取消</Button>
      </div>
    </div>
  </Modal>

  <ui-add-good
    :max-length="maxLength"
    :show="showAddGoodModal"
    :images="imagesList"
    :goodsType="goodsType"
    mode="radio"
    @on-visible-change="onVisibleGoodChange"
    @on-export="onExportGood"
    :needCrop="needCrop"
  />



  <ui-add-image
    :max-length="maxLength"
    :show="showAddImageModal"
    :images="imagesList"
    :CropType="CropType"
    mode="radio"
    @on-visible-change="onVisibleChange"
    @on-export="onExportImages"
    :needCrop="true"
  />

</div>
</template>

<script>
import Setting from '@/setting'
import UiAddGood from '@/components/ui/UiAddGood.vue'
import UiAddImage from '@/components/ui/UiAddImage.vue'



export default {
  name: 'ui-add-item-ext',
  components: {
    UiAddGood,
    UiAddImage,
  },
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    goodsType: {
        type: String,
        default: 'tb'
    }
  },

  data() {
    return {
      showModal: false,
      pickerImgs: [],
      pickerSelectesImgs: [],
      selectedKeys: [],

      maxLength: 9,
      showAddGoodModal: false,
      imagesList: [],
      needCrop: false,

      item: {},

      showAddImageModal: false,
      CropType: '11',

    }
  },
  computed: {},
  methods: {
    init () {
      this.showModal = true
      this.item = this.itemData
      // console.log(this.itemData);
      if(JSON.stringify(this.item) !== "{}") {
        this.pickerImgs = this.item.pickerImgs
        this.pickerSelectesImgs = this.item.pickerSelectesImgs
      }

    },
    delete () {
      this.item = {}
      this.pickerImgs = []
      this.pickerSelectesImgs = []
    },
    onExportItem() {
      // console.log('this.pickerImgs', this.pickerImgs)
      // console.log('this.pickerSelectesImgs', this.pickerSelectesImgs)
      // return false;
      if(this.pickerImgs.length == 0) {
        this.$Message.warning('请设置商品封面')
        return
      }
      if(this.pickerSelectesImgs.length !== 3) {
        this.$Message.warning('请选择三张图片作为展示图')
        return
      }


      this.item.pickerImgs = this.pickerImgs
      this.item.pickerSelectesImgs = this.pickerSelectesImgs

      const covers = []
      for(let key in this.item.pickerSelectesImgs){
        covers.push(this.item.pickerSelectesImgs[key]['url'])
      }
      this.item.covers = covers

      this.$emit('on-export', {
        item: this.item
      })
      this.showModal = false
    },
    onHide () {
      this.showModal = false
    },

    // 选择商品
    addGood () {
      this.showAddGoodModal = true
    },
    onVisibleGoodChange(res) {
        this.showAddGoodModal = res
    },
    onExportGood(res) {
        const { images } = res
        const data = images[0].desc_json
        this.item = data
        this.showAddGoodModal = false
        var imgCovers = []
        for(let key in data.images) {
          imgCovers.push({ key: key, url: data.images[key], checked: key==='0'  })
        }
        this.pickerImgs = imgCovers
        this.pickerSelectesImgs = [imgCovers[0]]
        this.item.pic_url = imgCovers[0]['url']
    },
    // 选择商品封面和商品主图
    onPickerTriggerChecked(e) {
      const { i, key } = e.currentTarget.dataset
      const cur = this.pickerImgs.filter(item => item.key === key)[0]
      const selfChecked = cur.checked
      this.$set(this.pickerImgs, i, {
        ...cur,
        checked: !selfChecked
      })

      if (selfChecked) {
        this.pickerSelectesImgs = this.pickerSelectesImgs.filter(
          item => item.key !== key
        )
        this.selectedKeys = this.selectedKeys.filter(item => item !== key)
      } else {
        this.pickerSelectesImgs = [...this.pickerSelectesImgs, cur]
        this.selectedKeys = [...this.selectedKeys, key]
      }
    },
    onSetMainCover(imgUrl) {
      this.item.pic_url = imgUrl
    },
    onRmSelectItem(e) {
      const { key } = e.currentTarget.dataset
      this.pickerSelectesImgs = this.pickerSelectesImgs.filter(
        item => item.key !== key
      )
      this.pickerImgs = this.pickerImgs.map(item => {
        return {
          ...item,
          checked: item.key === key ? false : item.checked
        }
      })
    },

    // 选择商品添加自主选择图片功能
    onAddItemImages () {
      this.showAddImageModal = true
    },
    onVisibleChange(res) {
      this.showAddImageModal = res
    },
    onExportImages(res) {
      const { images } = res
      const data = images[0]
      this.showAddImageModal = false
      const imgUrl = images[0].url+'?x-oss-process=image/crop,x_'+data.x+',y_'+data.y+',w_'+data.w+',h_'+data.h
      const apple = { key: JSON.stringify(this.pickerImgs.length), url: imgUrl, checked: false }
      this.pickerImgs.unshift(apple);
    },

  },
}
</script>

<style>
.item-content {
  margin:0;
}
</style>
<style lang="scss">
.iai-add-image__picture-sidebar {
  width: 140px;
  flex: 0 0 140px;
  overflow-y: auto;
  .ivu-menu-item-group-title {
    padding-left: 12px;
  }
}
.ice-add-image-dialog-new__footer__operation {
  display: flex;
  .ivu-btn {
    & + .ivu-btn {
      margin-left: 8px;
    }
  }
}
</style>
<style lang="scss" scoped>
.iai-add-image__picture-center {
  display: flex;
  height: 400px;
  border: 1px solid #e7e7e7;
}
.iai-add-image__picture-sidebar {
  width: 140px;
  flex: 0 0 140px;
  overflow-y: auto;
  .ivu-menu {
    height: 100%;
  }
}
.iai-add-image__picture-main {
  flex: 1;
}
.iai-add-image__picture-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
}
.ice-any-picker {
  height: 190px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}
.ice-any-picker__trigger {
  margin-left: 12px;
  padding-bottom: 12px;
  position: relative;
}
.iai-add-image__resource-pic {
  width: 145px;
  height: 178px;
  border: 1px solid #e7e7e7;
}
.iai-add-image__resource-pic__cover {
  height: 143px;
  width: 143px;
  overflow: hidden;
  img {
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
    vertical-align: middle;
  }
}
.iai-add-image__resource-pic__title {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 10px;
  line-height: 20px;
  padding-top: 5px;
}
.iai-add-image__resource-pic__pix {
  font-size: 12px;
  color: #999;
  padding: 0 10px;
  line-height: 20px;
}
.ice-any-picker__trigger-btn {
  width: 143px;
  height: 143px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  text-align: center;
  color: #fff;
  .ivu-icon {
    font-size: 28px;
    font-weight: bold;
    visibility: hidden;
  }
}
.ice-any-picker__trigger-btn-checked {
  background-color: rgba(#000, 0.5);
  .ivu-icon {
    visibility: visible;
  }
}
.main-cover {
  background-color: #2D8CF0;
  color: #fff;
}
</style>